import {Component, computed, effect, signal} from '@angular/core';
import {FormsModule} from "@angular/forms";

@Component({
  selector: 'app-signals',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './signals.component.html',
  styleUrl: './signals.component.less'
})
export class SignalsComponent {
  params = {
    price : 0,
    num: 0
  }
  paramsSignal = {
    price : signal(0),
    num  : signal(0),
  }

  cond = signal(false)
  count = signal(1)
  totalPrice = computed(() => {
    return this.paramsSignal.price() * this.paramsSignal.num()
  })

  countEff = effect(() => {
    console.log(
      `The current count is: ${this.paramsSignal.price()} and ${this.paramsSignal.num()}`
    );
  });

  // 设置大小
  set() {
    this.count.set(123)
  }
  // 增加
  add() {
    this.count.update(c => c + 1)
  }
  // 减小
  del() {
    this.count.update(c => c - 1)
  }

  plus() {
    this.count.update(() => this.count() * this.count())
  }

  changePrice($event: Event) {
    this.paramsSignal.price.set(this.params.price)
  }

  changeNum($event: Event) {
    this.paramsSignal.num.set(this.params.num)
  }

  toggle() {
    this.cond.update(val => !val);
  }
}
